$(window).on('load',function(){
	waterfall();
	//模拟返回的JSON数据
	  var dataInt={"data":[{"src":"img (1).jpg"},{"src":"img (2).jpg"},{"src":"img (3).jpg"},
	                       {"src":"img (4).jpg"},{"src":"img (5).jpg"},{"src":"img (6).jpg"}]};
	$(window).on('scroll',function(){
		if(checkScrollSlide){
			$.each(dataInt.data,function(index,value){
				//创建oBox这个div设置css样式，并且插入到main里面
				var oBox=$('<div>').addClass('box').appendTo($('#main'));
				//创建oPic
				var oPic=$('<div>').addClass('pic').appendTo(oBox);
				//插入图片并且设置图片的路径，使用attr对象
				var oImg=$('<img>').attr('src',"img/"+$(value).attr('src')).appendTo(oPic);
				
			})
			waterfall();
		}
	})
})
function waterfall(){
	var $boxs=$('#main>div');
	//获取一个box的宽度（各个宽度都一样）。获取outerwidth()
	var w=$boxs.eq(0).outerWidth();
	var cols=Math.floor($(window).width()/w);
	//设置main元素的宽度，使其不随浏览器调整而变化
	$('#main').width(cols*w);
	$('#main').css('margin','0 auto');
	var hArr=[];
	//遍历前六张图片，并且他们的高度都放入hArr数组里面
	$boxs.each(function(index,value){
		
		var h=$boxs.eq(index).outerHeight();
		if(index<cols){
			hArr[index]=h;
		}else{
			//求出数组中各个高度最小的一个
			var minH=Math.min.apply(null,hArr);
			//JQ里面专门用于求出数组中对应值索引index的函数，返回下标index
			var minHIndex=$.inArray(minH,hArr);
			//遍历出来的value是htmldom对象，要先转换为jQuery对象才能用css方法进行设置样式
			$(value).css({'position':'absolute',
			               'top':minH+"px",
			                 'left':minHIndex*w+"px"});
			//更新插入位置在数组中的高度数值
			hArr[minHIndex]+=$boxs.eq(index).height();
			
		}
	})
		
	
}
function checkScrollSlide(){
	var $lastBox=$('#main>div').last();
	var lastBoxDis=$lastBox.offset.top+Math.floor($lastBox.outerHeight()/2);
	var scrollTop=$(window).scrollTop();
	var documentH=$(window).height();
	return (lastBoxDis<scrollTop+DocumentH)?true:false;
}
